<style type="text/css">
    .clears{ clear:both;}
    /*messages*/
    .messages{padding:15px 0;}
    .messages input,.messages select,.messages textarea{margin:0;padding:0; background:none; border:0; font-family:"Microsoft Yahei";}
    .messlist {height:30px;margin-bottom:10px;}
    .messlist label{float:left;width:100px; height:30px; font-size:14px; line-height:30px; text-align:right;padding-right:10px;}
    .messlist input{float:left;width:300px;height:30px;padding-left:5px;border:#bbb 1px solid;}
    .messlist.textareas{ height:auto;}
    .messlist textarea{float:left;width:400px; height:110px;padding:5px;border:#ccc 1px solid;}
    .messlist.yzms input{width:100px;}
    .messlist.yzms .yzmimg{ float:left;margin-left:10px;}
    .messsub{padding:0px 0 0 110px;}
    .messsub .btn{    line-height: 22px;width: 50px;border: none;cursor: pointer;letter-spacing: 3px;}
    .messsub input{width:100px; height:35px; background:#ddd; font-size:14px; font-weight:bold; cursor:pointer;margin-right:5px}
    .messsub input:hover{ background:#f60;color:#fff;}

    * {
        padding: 0;
        margin: 0;
        font-size: 14px;
    }

    .lyb {
        width: 100%;
        margin: 5px 0;
        border: #DDDDDD 1px solid;
        overflow: hidden;
        display: flex
    }

    .lyb-l {
        background: #e5edf2;
        float: left;
        min-width: 160px;
        flex: 0 0 160px;
    }

    .lyb-r {
        float: left;
        background: white;
        padding: 0 20px;
        box-sizing: border-box;
        flex: 1
    }

    .lyb-lT {
        text-align: center;
        padding: 10px 0;
        font-weight: 800;
        border-bottom: 1px dashed #CDCDCD
    }

    .lyb-lB {
        height: 190px;
        padding: 10px 15px;
        box-sizing: border-box;
        text-align: center
    }

    .lyb-lB img {
        width: 130px;
        height: 128px;
    }

    .lyb-rT {
        padding: 10px 0;
        border-bottom: 1px dashed #CDCDCD
    }

    .lyb-rT img {
        vertical-align: middle;
        margin-right: 5px
    }

    .sf {
        float: right
    }

    .lyb-rB {
        padding: 10px 0;
    }

    .msg-content {margin-top: 50px;}
    .msg li{padding:30px 0;border-bottom: 1px dashed #e5e5e5;}
    .msg span{line-height: 27px;}
    .msg .msg-content{border:1px solid #dedede;padding:20px 10px;}

    .msg-page{text-align: center;margin-top:10px;}
    .msg-page li{float:left;margin-left:2px;}
    .msg-page a,.msg-page span{display: block;padding:0px 10px;line-height: 30px;cursor: pointer;border: 1px solid #C2D5E3;}
    .msg-page .active{color:red;}
    .clearfix:after{
        content: '';
        height:0;
        display: block;
        clear: both;
        overflow: hidden;
    }

    .clearfix:after{
        content: '';
        height:0;
        display: block;
        clear: both;
        overflow: hidden;
    }
</style>

<div class="row">
    <div class="span6">
        <!--<h3 class="section-title">联系我们</h3>-->

        <form class="form-light js-ajax-form messages" role="form" method="post"
              action="{:cmf_plugin_url('HzMsgBorad://Do/addhomemsg');}">
            <input type="hidden" name="article_id" value="{$article_id}">
            <div class="messlist">
                <label>电子邮件</label>
                <input type="text" name="email" placeholder="电子邮件"/>

                <div class="clears"></div>
            </div>
            <div class="messlist textareas">
                <label><font color="red">*</font>评论内容</label>
                <textarea name="msg" required placeholder="评论内容"></textarea>
                <div class="clears"></div>
            </div>
            <div class="messlist yzms">
                <label><font color="red">*</font>验证码</label>
                <input type="text" name="verify" required placeholder="验证码" style="margin-right: 30px;"/>
                <captcha height="30" width="120" font-size="16"/>

                <div class="clears"></div>
            </div>
            <div class="messsub">
                <button type="submit" class="btn btn-primary js-ajax-submit" style="background:#00a3eb;color:#fff;margin-top:-4px; height: 35px;" data-wait="1500">提交</button>
                <input type="reset" value="重填"/>
            </div>
        </form>



        <div class="msg-content">
            <volist name="msgData" id="vo">
                <div class="lyb">
                    <div class="lyb-l">
                        <div class="lyb-lT">{$vo.name}</div>
                        <div class="lyb-lB">
                            <php>
                                if($vo->avatar){
                                    $avatar = '/upload/'.$vo->avatar;
                                }else{
                                    $avatar ='__PLUGIN_TMPL__/public/assets/images/default.jpg';
                                }
                            </php>
                            <img src="{$avatar}" alt="">
                        </div>
                    </div>
                    <div class="lyb-r">
                        <div class="lyb-rT">
                            <img src="__PLUGIN_TMPL__/public/assets/images/online_member.gif" alt="">
                            <span>发表于 {$vo.createtime}</span>
                            <!--<span class="sf"></span>-->
                        </div>
                        <div class="lyb-rB">
                            <p>{$vo.msg}</p>
                        </div>
                    </div>
                </div>
            </volist>

            <div class="msg-page">
                <ul class="clearfix" style="display: inline-block;">
                    {$msgData->render()}
                </ul>
            </div>
        </div>



    </div>
</div>